<template>
  <div>
    <!-- 商品图片 -->
    <div class="img">
<<<<<<< HEAD
      <img src="/downloadFile/14.jpeg" alt="" />
=======
      <img src="/img/downloadFile/14.jpeg" alt="" />
>>>>>>> da85937c46a68704623e1c653d56a4a2c6859127
    </div>
    <!-- 详情 -->
    <div class="detail">
      <!-- 详情介绍 -->
      <div class="detail_js">
        <!-- 商品名 -->
        <h3>霸气鸭屎香柠檬</h3>
        <!-- 商品标签 -->
        <div class="title">
          <span class="red">手捣水香柠檬</span> <span>爆汁口感</span>
        </div>
        <!-- 商品简介 -->
        <div class="Introduction">
          <p>
            【500ml】 手捣的新鲜香水柠檬保留果肉粒的爆汁口感，在浸满香气
            悠扬的鸭屎香茶汤过后，舒展的柠檬气息与鸭屎香茶的隐隐兰香一并 散发，
            入口回甘， 令人心旷神怡。
          </p>
          <p>【柠檬长时间漫泡后易释放酸涩滋味，建议尽快饮用完毕】</p>
        </div>
      </div>
      <!-- 选配 -->
      <div class="detail_xp">
        <div class="xp_n">加料</div>
        <div class="xp_d">
<<<<<<< HEAD
          <span class="fail" ref="a" :class="{success:all}" @click="updateiscur(index)" v-for="(item,index) in items" :key='index'
            >{{item}}</span>
=======
          <span :class="iscur ? 'cur' : ' '" @click="updateiscur"
            >燃爆菌￥4.00</span
          ><span>0卡糖(0卡0脂肪)￥1.00</span>
>>>>>>> da85937c46a68704623e1c653d56a4a2c6859127
        </div>
      </div>
      <div class="detail_xp">
        <div class="xp_n">加料</div>
        <div class="xp_d">
<<<<<<< HEAD
          <span class="cur">燃爆菌￥4.00</span><span>0卡糖(0卡0脂肪)￥1.00</span>
=======
          <span>燃爆菌￥4.00</span><span>0卡糖(0卡0脂肪)￥1.00</span>
>>>>>>> da85937c46a68704623e1c653d56a4a2c6859127
        </div>
      </div>
      <div class="detail_xp">
        <div class="xp_n">加料</div>
        <div class="xp_d">
          <span>燃爆菌￥4.00</span><span>0卡糖(0卡0脂肪)￥1.00</span>
        </div>
      </div>
      <div class="detail_xp">
        <div class="xp_n">加料</div>
        <div class="xp_d">
          <span>燃爆菌￥4.00</span><span>0卡糖(0卡0脂肪)￥1.00</span>
        </div>
      </div>
      <div class="detail_xp">
        <div class="xp_n">糖度</div>
        <div class="xp_d">
          <span class="cur"
            >&nbsp;<b style="color: #a9d504">❤</b> 标准糖(推荐)</span
          ><span>少甜</span><span>少少甜</span><span>不另外加糖</span>
        </div>
      </div>
    </div>
    <!-- 商品结算 -->
    <div class="footer">
      <div class="sup">
        <div class="sup_left">
          <h3 class="price">￥18.00</h3>
          <div class="specifications">
            标准冰/标准甜(推荐)/鸭屎香茶/PLA可降解吸管
          </div>
        </div>
        <div class="sup_right">
          <van-stepper
            v-model="value"
            theme="round"
            button-size="22"
            disable-input
            style="varticle"
          />
        </div>
      </div>
      <div class="sub">
        <van-button
          round
          type="primary"
          size="large"
          style="color: black; background-color: #a7d500; border: #a7d500"
          >加入购物车</van-button
        >
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: 1,
<<<<<<< HEAD
      all:false,
      items:['爆燃具','答复','打发大水']
    }
  },
  methods: {
    updateiscur(index){
      console.log(index);
      let b=this.$refs.a[index]
      console.log(this.$refs.a[index]);
      
    }
  },
  mounted() {
    // let url = 'http://localhost:3000/detail'
    // this.axios.get(url).then(res => {
    //   console.log(res)
    // })
=======
      iscur: true,
    }
  },
  methods: {
    updateiscur() {
      this.iscur = !this.iscur
    },
  },
  mounted() {
    let url = 'http://localhost:3000/detail'
    this.axios.get(url).then(res => {
      console.log(res)
    })
>>>>>>> da85937c46a68704623e1c653d56a4a2c6859127
  },
}
</script>

<style lang="scss" scoped>
::v-deep .van-stepper__plus {
  color: #000;
  background-color: #a7d500;
}
::v-deep .van-stepper--round .van-stepper__minus {
  color: #a6a6a6;
  background-color: #fff;
  border: 1px solid #a6a6a6;
}
* {
  padding: 0;
  margin: 0;
}
div {
  // 商品图片
  .img {
    width: 100vw;
    height: 80vw;
    position: fixed;
    top: 0px;
    background-color: #fff;
    img {
      display: block;
      width: 83%;
    }
  }
  // 详情
  .detail {
    overflow: auto;
    padding: 15px;
    margin-top: 79vw;
    height: 90vw;

    //详情介绍
    .detail_js {
      //商品名
      h3 {
        font-weight: normal;
      }
      //商品标签
      div.title {
        margin-top: 5px;
        height: 25px;
        span.red {
          background-color: #ffefed;
          color: #dbacae;
        }
        span {
          font-size: 12px;
          background-color: #f1f1f1;
          color: #959595;
          border-radius: 2px;
          padding: 2px 5px;
        }
      }
      // 商品简介
      div.Introduction {
        margin-top: 10px;
        p {
          color: #7b7b7b;
          font-size: 12px;
          line-height: 1.7;
        }
      }
    }
    //详情选配
    .detail_xp {
      margin-top: 20px;
<<<<<<< HEAD
    }
      .detail_xp .xp_n {
=======
      .xp_n {
>>>>>>> da85937c46a68704623e1c653d56a4a2c6859127
        font-size: 12px;
      }
      .xp_d {
        display: flex;
        flex-wrap: wrap;
        margin-top: 10px;
        width: 70vw;
<<<<<<< HEAD
      }
        .fail {
=======
        span {
>>>>>>> da85937c46a68704623e1c653d56a4a2c6859127
          margin-right: 12px;
          margin-bottom: 12px;
          padding: 7px 12px;
          font-size: 12px;
          border: 1px solid #e0e0e0;
          color: #7b7b7b;
          border-radius: 5px;
        }
<<<<<<< HEAD
        .success {
          margin-right: 12px;
          margin-bottom: 12px;
          padding: 7px 12px;
          font-size: 12px;
=======
        span.cur {
>>>>>>> da85937c46a68704623e1c653d56a4a2c6859127
          border: 1px solid #a7d500;
          color: black;
          background-color: #f4f8e1;
        }
      }
<<<<<<< HEAD
    
  
=======
    }
  }
>>>>>>> da85937c46a68704623e1c653d56a4a2c6859127
  //尾部 商品结算
  .footer {
    width: 100vw;
    height: 36vw;
    background-color: white;
    position: fixed;
    bottom: 0px;
    box-shadow: 0 -4px 2px #fbfbfb;
    .sup {
      height: 40%;
      margin: 0 15px;
      display: flex;
      justify-content: space-between;
      .sup_left {
        .price {
          margin: 9px 0;
        }
        .specifications {
          font-size: 12px;
          color: #7b7b7b;
        }
      }
      .sup_right {
        display: flex;
        align-items: center;
      }
    }
    .sub {
      height: 60%;
      margin: 0 15px;
      display: flex;
      align-items: center;
    }
  }
}
</style>
